<template>
    <div class="table">
        <div class="content-common">
           <el-row type="flex" class="row-bg" justify="space-between" style="padding-bottom:20px">
				<el-col :span="6"><el-button type="primary"  @click="prepage()">返回</el-button></el-col>
				<el-col :span="6" style="text-align:right">
           			<el-button  type="primary" icon="plus" @click="handleAdd()">新增</el-button>
					<el-button  type="primary" icon="download" @click="downexcell">导出记录</el-button>
				</el-col>
           </el-row>
		   

		   
           <div style="font-size:18px;text-align:center;font-weight:bold;padding-bottom:8px">
			{{topInfo.stnm}}站降水过程摘录
		   </div>
		  <div>

			
			      
			<span style="margin-right:12px">观测年: <span style="color:red">{{topInfo.year}}</span>  </span>
			<span style="margin-right:12px">雨量站:<span style="color:red">{{topInfo.extractorName1}}</span></span>
			<span style="margin-right:12px">摘录人:<span style="color:red">{{topInfo.extractorName}}</span></span>
			<span style="margin-right:12px">计算人:<span style="color:red">{{topInfo.calculatorName}}</span></span>
			<span>审核人:<span style="color:red">{{topInfo.reviewerName}}</span></span>
		  </div>
            <el-table
                :data="tableData"
                border
                class="table-common"
                header-cell-class-name="table-header"
               
            >
               
               <el-table-column align="center" prop="seqNo" label="降水次序 "></el-table-column>
			 
				<el-table-column align="center" prop="tm" label="时间">
					<template #default="scope">
					   <span>{{scope.row.tm.substring(0,16)}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="totalDrp" label="累积雨量(mm) "></el-table-column>
				<el-table-column align="center" prop="totalPdr" label="累积历时(min) "></el-table-column>
				<el-table-column align="center" prop="totalPdr" label="时段降雨 ">
					<el-table-column align="center" prop="drp" label="雨量(mm)  "></el-table-column>
					<el-table-column align="center" prop="pdr" label="历时(min) "></el-table-column>
					<el-table-column align="center" prop="rainIntensity" label="时段雨强(mm/h) "></el-table-column>
				</el-table-column>
				<el-table-column align="center" prop="i30" label="I30 (mm/h)  "></el-table-column>
				<el-table-column align="center" prop="ei30" label="降雨侵蚀力(MJ.mm/(h㎡.h))  "></el-table-column>
            </el-table>
			
			
			<el-row type="flex"  justify="end">
			  <el-pagination
			    background
				
				:current-page.sync="page.currentPage"
				@current-change="getData"
			    layout="prev,total, pager, next"
			    :total="page.totalSize">
			  </el-pagination>
			</el-row>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="logTitle" v-model="editVisible" width="96%">
           <el-form :label-position="'right'" :inline="true" :model="query">
           	<el-form-item label="时间">
           	    <el-date-picker
           		value-format="YYYY-MM-DD HH:mm:ss"
           		  v-model="query.tm"
           		  type="datetimerange"
           		  range-separator="至"
           		  start-placeholder="开始日期"
           		  end-placeholder="结束日期">
           		</el-date-picker>
           	</el-form-item>
           	<el-form-item label="">
           	  <!-- <el-button type="primary" icon="search" @click="getcijiangyu()">查询</el-button> -->
			   <el-button type="primary" icon="plus" @click="getbufuhecijiangyu()">获取次降雨数据</el-button>
           	  </el-form-item>
           </el-form>
            <!-- <el-table
                :data="cijiangyuData"
				@selection-change="handleSelectionChange"
                border
				class="table-common"    
				header-cell-class-name="table-header"
                style="width: 100%">
				<el-table-column
				    type="selection"
					align="center"
				    width="55">
				</el-table-column>
                <el-table-column
				align="center"
                  prop="seqNo"
                  label="降雨次序"
                  >
                </el-table-column>
                <el-table-column
                  prop="tm"
				  align="center"
                  label="时间"
                  >
                </el-table-column>
				<el-table-column
				  prop="totalDrp"
				  align="center"
				  label="累计雨量(mm)"
				  >
				</el-table-column>
                <el-table-column
                  prop="totalPdr"
				  align="center"
                  label="累计历时(min)">
                </el-table-column>
				<el-table-column
				  prop="drp"
				  label="时段降雨量(mm)">
				</el-table-column>
				<el-table-column
				  prop="pdr"
				  align="center"
				  label="时段降雨历时(min)">
				</el-table-column>
				<el-table-column
				  prop="rainIntensity"
				  align="center"
				  label="时段雨强(mm/h)">
				</el-table-column>
				<el-table-column
				  prop="i30"
				  align="center"
				  label="I30(mm/h)">
				</el-table-column>
				<el-table-column
				  prop="ei30"
				  align="center"
				  label="降雨侵蚀力(MJ.mm/(hm².h))">
				</el-table-column>
				<el-table-column
				  prop="remark"
				  align="center"
				  label="备注">
				</el-table-column>
              </el-table> -->	    
			 <el-table
			     :data="bufehuData"
			     border
			    @selection-change="handleSelectionChange"
			     class="table-common"
			    ref="multipleTable"
			     header-cell-class-name="table-header"
			    
			 >	
				<el-table-column
					 type="selection"
					align="center"
					 width="55">
				</el-table-column>
			 	<el-table-column width="84" align="center" prop="seqNo" label="降雨次序"></el-table-column>
			     <el-table-column align="center" prop="tmFrom" label="开始时间"></el-table-column>
			     <el-table-column align="center" prop="tmEnd" label="结束时间"></el-table-column>
			     <el-table-column align="center" prop="drp" label="降雨量(mm)"></el-table-column>
			 	<el-table-column align="center" prop="pdr" label="降水历时(min)"></el-table-column>
			 	<el-table-column align="center" prop="avgDrp" label="平均雨强"></el-table-column>
			 	
			 	<el-table-column align="center" prop="i30" label="I30(mm/h)"></el-table-column>
			 	
			 	<el-table-column align="center" prop="e" label="E(MJ·hm-2)"></el-table-column>
			 
			 	<el-table-column width="184" align="center" prop="ei30" label="EI30(MJ.mm/(ha.h))"></el-table-column>
			 </el-table>
			  
              <!-- <el-row type="flex"  justify="end">
                <el-pagination
                background
				:page-size="page.pageSize"
              	:current-page.sync="currentPageshuju"
              	@current-change="fenye"
				:page-sizes="[10,20, 50, 100, 400,1000]"
				@size-change="handleSizeChange"
                layout="prev,total,"sizes, prev, pager, next"
                :total="cijiangyuAllData.length">
                </el-pagination>
                </el-row>
             -->
          
				<template #footer>
					<span  class="dialog-footer">
				
				<el-button type="primary" @click="xiugaibiaoshi">确 定</el-button>
					</span>
				</template>
        </el-dialog>
		
    </div>
</template>

<script>


import { calculaterainfallviewlistRainfall2Calculate,
soilWaterrunoffFieldrainfallsequenceeditupdateCalFlag,
calculaterainfallviewselectProRainfall,sysdictviewlistDictItem,reportfieldManageeditdoApprove,reportfieldManageeditrevokeRecord,reportfieldManageeditsubmitRecord,
viewPageStationInfo,rainfallImportRainfallDaily,calculaterainfallviewpageDetail, calculaterainfallsaveaddDetail, 
calculaterainfallremovedelDetail,soilWaterrunoffFieldcalculaterainfallviewselfSelectionRainfall,calculaterainfallviewselectSeqRainfall } from '../../../api/index';
import moment from "moment";
export default {
    name: 'jisuanjiangshuimingxi',
    data() {
        return {
			topInfo:{},
			currentPageshuju:1,
			cijiangyuAllData:[],
			cijiangyuData:[],
			shenpilog:false,
			globalUser:[],
			page:{
				currentPage: 1,
				pageSize: 10,
				totalPage: 0,
				totalSize: 0
			},
            query: {
				tm:[]
            },
			excelllog:false,
            formInline: {},
            tableData: [],
           
            editVisible: false,
            logTitle: '',
            pageTotal: 0,
            form: {
              
            },
			stationData:[],
			seldata:[],
			checkArr:[],
			tijiaoform:{
				
			},
			bufehuData:[],
			fehuData:[],
			selnow:{},
			jiangyuguochengData:[],
			status:'/'
        };
    },
    created() {
		this.topInfo={
			year:this.$route.query.year,
			stnm:this.$route.query.stnm,
			extractorName:this.$route.query.extractorName,
			calculatorName:this.$route.query.calculatorName,
			reviewerName:this.$route.query.reviewerName
		}
		this.status=this.$route.query.status
		this.globalUser=globalUser
        let that = this;
        //that.getData();
		//this.getcijiangyu()
		this.getfuhecijiangyu()
	
		
		
    },
    methods: {
		xiugaibiaoshi(){
			let that=this
			console.log(this.seldata)
			let data=this.seldata.map(item=>{
				return item.id
			})
			let dataobj=data.map(item=>{
				let obj={
					
					stcd:item.stcd,
					tmFrom:item.tmFrom,
					tmEnd:item.tmEnd,
					seqId:item.id
				}
				return obj;
			})
			
			
			
			soilWaterrunoffFieldrainfallsequenceeditupdateCalFlag(data).then(e=>{
				that.getJiangyuguocheng()
			}).catch(err=>{
				console.log(err)
			})
		},
		getfuhecijiangyu(){
			let that=this
			let obj={
				stType:systype,
				stcd:that.$route.query.stcd,
				tmFrom:globalyear+'-01-01 00:00:00',
				tmEnd:globalyear+'-12-31 24:59:59'
			}
			
			calculaterainfallviewselectSeqRainfall(obj).then(e=>{
				that.fehuData=e.object
				that.getJiangyuguocheng()
			}).catch(err=>{
				console.log(err)
			})
		},
		getjiangyushuju(){
			
			calculaterainfallviewselectProRainfall().then(e=>{
				console.log(e)
			}).catch(err=>{
				console.log(err)
			})
			
		},
		getbufuhecijiangyu(){
			
			let that=this
			let obj={
				year:that.$route.query.year,
				stType:systype,
				stcd:that.$route.query.stcd,
				tmFrom:that.query.tm[0],
				tmEnd:that.query.tm[1]
			}
			soilWaterrunoffFieldcalculaterainfallviewselfSelectionRainfall(obj).then(e=>{
				that.bufehuData=e.object.map(item=>{
					console.log(item)
					item.tmEnd=moment(item.tmEnd).format("YYYY-MM-DD HH:mm")
					item.tmFrom=moment(item.tmFrom).format("YYYY-MM-DD HH:mm")
					return item
				})
			}).catch(err=>{
				console.log(err)
			})
		},
		downexcell(){
			let headNo=this.$route.query.recordNo
			window.location.href=globalVar.jingliujiangyuUrl+'/soilWater/runoffField/calculate/rainfall/export/exportRecordData?headNo='+headNo
		},
		handleSizeChange(e){
			this.page.pageSize=e
			this.fenye()
		},
		prepage(){
			this.$router.go(-1);
		},
		
		getJiangyuguocheng(){
			let that=this
			let data=this.fehuData.concat(this.seldata)
			let dataobj=data.map(item=>{
				let obj={
					
					stcd:item.stcd,
					tmFrom:item.tmFrom,
					tmEnd:item.tmEnd,
					seqId:item.id
				}
				return obj;
			})
			
			calculaterainfallviewselectProRainfall(data).then(e=>{
				
				
				
			
				let arr=[]
				for(let i=0;i<e.object.length;i++){
					for(let j=0;j<e.object[i].progressList.length;j++){
						e.object[i].progressList[j].headNo=that.$route.query.recordNo
						//e.object[i].progressList[j].seqNo=i+1
					}
					arr=arr.concat(e.object[i].progressList)
				}
				that.cijiangyuAllData=arr.map(item=>{
				   item.headNo=this.$route.query.recordNo
				   item.stType=systype
				   return item
				})
				that.jiangyuguochengData=arr.map((item,index)=>{
					item.sequence=index+1
					return item
				})
				console.log(that.jiangyuguochengData,e.object,'66666666666666666666666666666666666')
				that.saveEdit()
				
			}).catch(err=>{
				console.log(err)
			})
		},
		handleSelectionChange(val) {
			
			this.seldata=val
			
		},
		fenye(e){

			this.currentPageshuju=e?e:1
			
			this.cijiangyuData=this.cijiangyuAllData.slice((this.currentPageshuju-1)*(this.page.pageSize),this.currentPageshuju*(this.page.pageSize))
		},
		getcijiangyu(){
			
			let that=this
			calculaterainfallviewlistRainfall2Calculate({
				stType:systype,
				stcd:that.$route.query.stcd,
				tmFrom:that.$route.query.year+'-01-01 00:00:00',
				tmEnd:that.$route.query.year+'-12-31 24:59:59'
			}).then(e=>{
				let arr=[]
				for(let i=0;i<e.object.length;i++){
					for(let j=0;j<e.object[i].progressList.length;j++){
						e.object[i].progressList[j].headNo=that.$route.query.recordNo
						// e.object[i].progressList[j].seqNo=i+1
					}
					arr=arr.concat(e.object[i].progressList)
				}
				that.cijiangyuAllData=arr.map(item=>{
				   item.headNo=this.$route.query.recordNo
				   item.stType=systype
				   return item
			   })
				that.saveEdit()
				
			}).catch(e=>{
				console.log(err)
			})
		},
		quedingtijiao(){
			this.tijiaoform.relatedNo=this.selnow.recordNo
			let that=this
			reportfieldManageeditdoApprove(that.tijiaoform).then(e=>{
				that.$message.success('操作成功');
				that.shenpilog=false
			}).catch(e=>{
				console.log(err)
			})
		},
		daorujiangyu(){
			let that=this
			rainfallImportRainfallDaily(that.form).then(e=>{
				console.log(e)
			}).catch(err=>{
				console.log(err)
			})
		},
      
        getData(e) {
			this.page.currentPage=e?e:1
			let data={
				headNo:this.$route.query.recordNo,
				currentPage:this.page.currentPage,
			}
            calculaterainfallviewpageDetail(data).then((res) => {
               
               this.tableData = res.object.dataList;
               this.page.totalSize=res.object.page.totalSize
                
            });
        },
        // 触发搜索按钮
        handleSearch() {
           
            this.getData();
        },
        // 删除操作
        handleDelete(row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    calculaterainfallremovedelDetail([row.detailNo] ).then((e) => {
                        this.$message.success('删除成功');
                        this.getData();
                    });
                })
                .catch(() => {});
        },

        // 编辑操作
        handleEdit(row) {
            this.form = row;
           
            this.logTitle = '次降雨数据';
           
            this.editVisible = true;
        },
        handleAdd() {
            this.logTitle = '次降雨数据';
            this.form = {
               year:moment().format('YYYY')
            };
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
			 let that=this
			
           
			   that.seldata=that.jiangyuguochengData.map(item=>{
				   item.headNo=this.$route.query.recordNo
				   return item
			   })
                calculaterainfallsaveaddDetail(that.jiangyuguochengData).then((e) => {
                    this.editVisible = false;
					this.seldata=[]
                    this.$message.success('操作成功');
					if(this.$refs.multipleTable){
						this.$refs.multipleTable.clearSelection();
					}
					
                    this.getData();
                });
            
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>

